<template>
	<div>
    <el-card shadow="hover">
      <template #header>
        <div style="display: flex; justify-content: space-between;">
          <div>
            <el-popover
                placement="bottom"
                title="Title"
                :width="200"
                trigger="click"
                content="this is content, this is content, this is content"
            >
              <template #reference>
                <el-button style="width: 100px;color: #3ea1f7;border-color: #3ea1f7">
                  <el-icon><Setting/></el-icon> 字段设置
                </el-button>
              </template>
            </el-popover>

          </div>
          <div>
            <el-input
                style="width: 240px;margin-right: 5px;"
                placeholder="搜索"
                :prefix-icon="Search"
            />

            <el-tooltip
                class="box-item"
                effect="light"
                content="导入"
                :show-arrow="false"
                placement="top"
            >
              <el-button class="pv_MyButton">
                <img class="pv_myImg" src="/images/svg/导入.svg">
              </el-button>
            </el-tooltip>

            <el-tooltip
                :show-arrow="false"
                class="box-item"
                effect="light"
                content="导出"
                placement="top"
            >
              <el-button class="pv_MyButton">
                <img class="pv_myImg" src="/images/svg/导出.svg">
              </el-button>
            </el-tooltip>

            <el-tooltip
                :show-arrow="false"
                class="box-item"
                effect="light"
                content="添加数据"
                placement="top"
            >
              <el-button type="primary">
                <el-icon size="18"><Plus /></el-icon>
              </el-button>
            </el-tooltip>

          </div>
        </div>
      </template>
      <el-table style="width: 100%" height="470">
        <el-table-column fixed prop="date" label="Date" width="150" />
        <el-table-column prop="name" label="Name" width="120" />
        <el-table-column prop="state" label="State" width="120" />
        <el-table-column prop="city" label="City" width="320" />
        <el-table-column prop="address" label="Address" width="600" />
        <el-table-column prop="zip" label="Zip" width="120" />
      </el-table>
    </el-card>
	</div>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
  import {Plus, Search, Setting} from "@element-plus/icons-vue";
	const title = ref('付款核销');
</script>

<style scoped lang="scss">

.pv_myImg {
  width: 20px;
  height: 20px;
}

.pv_MyButton{
  border-color: #3ea1f7;
}

</style>